import React, { FC, useEffect, useState } from 'react';
import {
  NavBar,
  Icon,
  Carousel,
  WingBlank,
  Card,
  WhiteSpace,
  Grid,
} from 'antd-mobile';
import { Typography } from 'antd';
import styles from './home.less';
import { connect, IndexModelState, ConnectProps } from 'umi';

interface PageProps extends ConnectProps {
  index: IndexModelState;
  dispatch: any;
}
const { Paragraph } = Typography;

const Home: FC<PageProps> = (props: any) => {
  const {
    bannerList = [],
    songSheetList = [],
    mvList = [],
    newSongList = [],
  } = props.index;
  const [imgHeight, setImgHeight] = useState('176');
  let getBannerList = () => {
    props.dispatch({
      type: 'index/getBannerList',
      payload: {
        type: '2',
      },
    });
  };

  let getSongSheet = () => {
    props.dispatch({
      type: 'index/getSongSheetList',
      payload: {
        cat: '',
        limit: 4,
      },
    });
  };

  let getMvList = () => {
    props.dispatch({
      type: 'index/getMNList',
    });
  };
  let getNewSongList = () => {
    props.dispatch({
      type: 'index/getNewSongList',
    });
  };

  useEffect(() => {
    getBannerList();
    getSongSheet();
    getMvList();
    getNewSongList();
  }, []);

  return (
    <div>
      <WhiteSpace size="lg" />
      <WingBlank>
        <Carousel
          className={styles['space-carousel']}
          autoplay={false}
          infinite
        >
          {bannerList.map((val: any, index: any) => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: 'block',
                position: 'relative',
                top: 0,
                boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                height: imgHeight,
              }}
            >
              <img
                src={val.pic}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  setImgHeight('auto');
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>

      <WhiteSpace size="lg" />
      <Card full>
        <Card.Header
          title="歌单推荐"
          extra={<span className={styles.cardMore}>更多</span>}
        />
        <Card.Body>
          <Grid
            data={songSheetList}
            hasLine={false}
            itemStyle={{ height: '150px' }}
            renderItem={(dataItem: any) => (
              <div>
                <img
                  src={dataItem.coverImgUrl}
                  style={{ width: '90%' }}
                  alt=""
                />
                <div className={styles.cardName}>
                  <Paragraph ellipsis={{ rows: 2 }}>{dataItem.name}</Paragraph>
                </div>
              </div>
            )}
          />
        </Card.Body>
      </Card>

      <WhiteSpace size="lg" />
      <Card full>
        <Card.Header
          title="推荐MV"
          extra={<span className={styles.cardMore}>更多</span>}
        />
        <Card.Body>
          <Grid
            data={mvList}
            hasLine={false}
            itemStyle={{ height: '150px' }}
            columnNum={2}
            renderItem={(dataItem: any) => (
              <div>
                <img src={dataItem.picUrl} style={{ width: '90%' }} alt="" />
                <div className={styles.cardName}>
                  <Paragraph ellipsis={{ rows: 2 }}>{dataItem.name}</Paragraph>
                </div>
              </div>
            )}
          />
        </Card.Body>
      </Card>

      <WhiteSpace size="lg" />
      <Card full>
        <Card.Header
          title="推荐新音乐"
          extra={<span className={styles.cardMore}>更多</span>}
        />
        <Card.Body>
          <Grid
            data={newSongList}
            hasLine={false}
            itemStyle={{ height: '180px' }}
            columnNum={2}
            renderItem={(dataItem: any) => (
              <div className={styles.cardContent}>
                <img src={dataItem.picUrl} style={{ width: '90%' }} alt="" />
                <div className={styles.pCardName}>
                  <Paragraph ellipsis={{ rows: 1 }}>{dataItem.name}</Paragraph>
                </div>
              </div>
            )}
          />
        </Card.Body>
      </Card>
    </div>
  );
};

export default connect(({ index }: { index: IndexModelState }) => ({ index }))(
  Home,
);
